/*
 * 轮播图特效
 * 日期：2021年09月10日
 * 姓名：
 */
(function () {
  //获取元素
  var carousel_list = document.getElementById("carousel_list");
  var left_btn = document.getElementById("left_btn");
  var right_btn = document.getElementById("right_btn");
  var circle_ol = document.getElementById("circle_ol");
  var banner = document.getElementById("banner");
  var circle_lis = circle_ol.getElementsByTagName("li");
  //克隆第一张图
  var clone_li = carousel_list.firstElementChild.cloneNode(true);
  //把克隆的第一张图加在节点上
  carousel_list.appendChild(clone_li);
  //当前正在显示的图片序号，从0开始
  var idx = 0;
  // 节流锁
  var lock = true;
  right_btn.onclick = right_btn_handler;

  function right_btn_handler() {
    // 判断节流锁的状态，如果是关闭的，那么就什么都不做
    if (!lock) return;
    // 关锁
    lock = false;
    // 加上过渡
    carousel_list.style.transition = "transform .5s ease 0s";
    // idx当然要加1
    idx++;
    // 拉动
    carousel_list.style.transform = "translateX(" + -16.66 * idx + "%)";
    // 设置小圆点
    setCircles();

    // 开锁，动画结束之后开锁
    setTimeout(function () {
      lock = true;
    }, 500);
  }

  //设置圆点
  function setCircles() {
    for (var i = 0; i <= 4; i++) {
      if (i == idx % 5) {
        circle_lis[i].className = "current";
      } else {
        circle_lis[i].className = "";
      }
    }
  }

  left_btn.onclick = function () {
    //alert("右按钮");
    // 判断节流锁的状态，如果是关闭的，那么就什么都不做
    if (!lock) return;
    // 关锁
    lock = false;
    if (idx == 0) {
      carousel_list.style.transition = "none";
      // 拉到最后（瞬间移动
      carousel_list.style.transform = "translateX(" + -16.66 * 5 + "%)";
      // 改变idx的值
      idx = 4;

      setTimeout(function () {
        // 加上过渡
        carousel_list.style.transition = "transform .5s ease 0s";
        // 动画
        carousel_list.style.transform = "translateX(" + -16.66 * 4 + "%)";
      }, 0);
    } else {
      idx--;
      // 拉动
      carousel_list.style.transform = "translateX(" + -16.66 * idx + "%)";
    }
    setCircles();

    // 开锁，动画结束之后开锁
    setTimeout(function () {
      lock = true;
    }, 500);
  };

  //定时器轮播图
  var timer = setTimeout(right_btn_handler, 2000);

  // 鼠标进入，自动轮播暂停
  banner.onmouseenter = function () {
    clearInterval(timer);
  };

  // 鼠标离开，自动轮播开始
  banner.onmouseleave = function () {
    // 设表先关
    clearInterval(timer);
    // 设置定时器，这里不要加var，加var就变为局部变量了，就clear不掉了！
    timer = setInterval(right_btn_handler, 2000);
  };

  // 事件委托，小圆点的监听
  circle_ol.onclick = function (e) {
    if (e.target.tagName.toLowerCase() == "li") {
      // 得到li身上的data-n属性，就是n
      var n = Number(e.target.getAttribute("data-n"));
      // 改变idx
      idx = n;
      // 拉动
      carousel_list.style.transform = "translateX(" + -16.66 * idx + "%)";
      // 调用改变小圆点函数
      setCircles();
    }
  };
})();
